<!doctype html>

<style>
  svg {
    width: 100px;
    height: 100px;
    margin: 1px;
  }

  #test-root {
    position: absolute;
    left: 10px;
    top: 10px;
  }

  #test-child {
    position: absolute;
    left: 10px;
    top: 130px;
  }
</style>

<p id="test-root">

<!-- SVG root element: the first three filters are valid, the rest are not. -->

<svg viewBox="0 0 50 50">
  <rect fill="lime" x="0" y="0" height="50" width="50"/>
</svg>

<svg viewBox="0 0 50 50">
  <rect fill="lime" x="0" y="0" height="50" width="50"/>
</svg>

<svg viewBox="0 0 50 50">
  <rect fill="lime" x="0" y="0" height="50" width="50"/>
</svg>

<svg viewBox="0 0 50 50">
  <rect fill="red" x="0" y="0" height="50" width="50"/>
</svg>

<svg viewBox="0 0 50 50">
  <rect fill="red" x="0" y="0" height="50" width="50"/>
</svg>

<svg viewBox="0 0 50 50">
  <rect fill="red" x="0" y="0" height="50" width="50"/>
</svg>

<svg viewBox="0 0 50 50">
  <rect fill="red" x="0" y="0" height="50" width="50"/>
</svg>
</p>

<p id="test-child">

<!-- SVG child element: the first filter is valid, the rest are not. -->

<svg viewBox="0 0 50 50">
  <rect fill="lime" x="0" y="0" height="50" width="50"/>
</svg>

<svg viewBox="0 0 50 50">
  <rect fill="lime" x="0" y="0" height="50" width="50"/>
</svg>

<svg viewBox="0 0 50 50">
  <rect fill="lime" x="0" y="0" height="50" width="50"/>
</svg>
</p>
